<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <title>微学习</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/plugins/bootstrap4/css/bootstrap.min.css"/>


    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/article/detail.css"/>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script src="${base}/layui/layui.js"></script>


    <script src="${base}/js/article/detail.js"></script>

    <script>
        $("#publish_article_nav").addClass("active")
    </script>
</head>
<body>

<style>
    h1 {
        color: #29B4F0;
        text-decoration: none;
        font-size: 30px;
    }

    .node-header {
        font-size: 15px;
        color: #ccc;
    }
</style>

<div class="d-flex flex-row" style="background-color: #eeeeee">

    <div class="d-flex flex-column mt-2 p-2" style="flex:7; ">
        <div style="padding:20px; " class="bg-light">
            <h1>${article.article_title}</h1>
            <div class="d-flex node-header">
                <div>
                    <span>作者：${article.author.te_name}</span>
                    <span>日期：<fmt:formatDate value="${article.article_release_time}"
                                             pattern="yyyy/MM/dd HH:mm:ss"></fmt:formatDate> </span>
                    <span class="icon"> &#xe662; ${article.article_zan}</span>&nbsp;&nbsp;
                    <span class="icon"> &#xe71b; ${article.article_read_count}</span>
                </div>
            </div>

            <div style="padding: 10px;">
                <div class="content">
                    ${article.article_content}
                </div>
                <div class="d-flex">

                </div>
            </div>
            <div id="evaluate" class="evaluate layui-row">
                <div id="zan" class="layui-col-md2">
                    <c:if test="${empty zan or !zan.zan_status}">
                        <span class="icon zan1" name="1" onclick="changeZan(this,${article.article_id})"></span>
                    </c:if>
                    <c:if test="${!empty zan && zan.zan_status}">
                        <span class="icon zan2" name="2" onclick="changeZan(this,${article.article_id})"></span>
                    </c:if>
                </div>
                <div id="star-comments" class="layui-col-md3">
                    <div id="test1"></div>
                </div>
            </div>

            <div>
                <a class="btn btn-primary" href="javascript:window.history.back();">返回</a>
            </div>
        </div>

    </div>
    <%@include file="/WEB-INF/views/linkNav.jsp" %>
</div>
<div></div>
<%@include file="/WEB-INF/views/footer.jsp" %>

</body>
<script>
    layui.use(['rate'], function () {
        var rate = layui.rate;
        //基础效果
        rate.render({
            elem: '#test1',
            value:${(empty star or empty star.sc_level)?0:star.sc_level},
            choose: function (value) {
                // 向后天保存
                $.ajax({
                    url: base + '/comments/star',
                    type: 'post',
                    data: {star: value, article_id:${article.article_id}},
                    success: function (result) {

                    }
                })
            }
        })
    });
</script>
</html>